<template>
    <div class="banxin">
        <el-carousel height="400px" style="margin-top: 20px;">
            <el-carousel-item v-for="item in banner" :key="item.id">
                <img :src="'http://47.93.114.103:6688/' + item.imgUrl" alt />
            </el-carousel-item>
        </el-carousel>
        <el-row class="nav">
            <el-col :span="8">
                <section>
                    <el-icon :size="50">
                        <shop />
                    </el-icon>
                </section>
                <main>进入商店</main>
            </el-col>
            <el-col :span="8">
                <section>
                    <el-icon :size="50">
                        <promotion />
                    </el-icon>
                </section>
                <main>私信客服</main>
            </el-col>
            <el-col :span="8">
                <section>
                    <el-icon :size="50">
                        <trend-charts />
                    </el-icon>
                </section>
                <main>看市盈率</main>
            </el-col>
        </el-row>
        <img src="http://codesohigh.com:8800/_nuxt/img/map.6a9caa3.png" class="map" alt="">
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { bannerApi } from '../request/api'
import { Shop, Promotion, TrendCharts } from '@element-plus/icons-vue'

let banner = ref([])

onMounted(() => {
    bannerApi().then(res => {
        if (res.errCode === 0) {
            banner.value = res.data;
        }
    })
})
</script>

<style scoped lang='less'>
.nav {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    .el-col {
        section {
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        main {
            margin-top: 20px;
        }
        &:hover {
            cursor: pointer;
            color: #1989fa;
            section{
                border-color: #1989fa;
            }
        }
    }
}

.map{
    margin-bottom: 20px;
}
</style>